<template>
  <div class="search-header">
    <!-- 搜索输入框 -->
    <!-- <el-input v-model="searchVal" placeholder="搜索会话历史..." prefix-icon="el-icon-search" class="search-input"></el-input> -->
    <!-- 设置图标按钮 -->
    <el-button icon="el-icon-setting" type="text" class="setting-btn" size="32" @click="handleSetting"></el-button>
    <!-- 头像 -->
    <div @click="PerSetting">
      <el-avatar class="avatar" :src="avatar || require('@/assets/image/head.svg')"></el-avatar>
    </div>
     <UserSettingDrawer ref="settingsDialog" />
     <!-- 个人信息设置 -->
     <PersonalInfoDialog  ref="settingsPer"/>
  </div>
</template>

<script>
  import UserSettingDrawer from './UserSettingDrawer.vue'
  import PersonalInfoDialog from './PersonalInfoDialog.vue';
  export default {
    name: 'SearchHeader',
    components: {
      UserSettingDrawer,
      PersonalInfoDialog
    },
    data() {
      return {
        searchVal: '',
        avatar: '',
        dialogVisible: true,
        username: '低空经济',
        phone: '15803888688'
      }
    },
    mounted() {
        this.$root.Bus.$on('refreshList', value => {
                setTimeout(()=>{
                let userInfo=JSON.parse(sessionStorage.getItem("userInfo"))
                 if(userInfo.head){
                   this.avatar=this.$baseUrl + '/upload/'+userInfo.head
                 }
                },800)
        })
        this.$nextTick(()=>{
          setTimeout(()=>{
          let userInfo=JSON.parse(sessionStorage.getItem("userInfo"))
           if(userInfo.head){
             this.avatar=this.$baseUrl + '/upload/'+userInfo.head
           }
          },800)
        })

    },
    methods: {
      // 弹窗关闭回调
      onModalClosed() {
        console.log('侧边栏弹窗已关闭');
      },
      handleSetting() {
        // 点击设置的逻辑，可打开弹窗、跳转设置页等
        console.log('点击了设置按钮')
        this.$refs.settingsDialog.open()
      },
      // 设置个人信息
      PerSetting(){
         this.$refs.settingsPer.open()
      }
    }
  }
</script>

<style scoped>
  /* 外层容器布局 */
  .search-header {
    display: flex;
    align-items: center;
    padding: 1px 0;
    border-radius: 4px;
  }

  /* 搜索输入框样式 */
  .search-input {
    /* 让输入框占满剩余空间 */
    flex: 1;
    /* 覆盖 Element UI 输入框默认样式，按需调整 */
    --el-input-bg-color: #fff;
    --el-input-border-color: #dcdde1;
    --el-input-hover-border-color: #b8bec7;
  }

  /* 设置按钮样式 */
  .setting-btn {
    margin: 0 30px 0 30px;
    color: #666;
  }

  /* 头像样式 */
  .avatar {
    width: 32px;
    height: 32px;
    cursor: pointer;
  }
>>>.el-avatar{
  background: transparent;
}
  >>>.el-icon-setting {
    font-size: 22px;
  }
</style>
